<template>
  <div>
    <el-drawer
      :with-header="false"
      :size="800"
      :visible.sync="createDrawer"
      direction="rtl"
      :before-close="handleClose"  
    >
      <div>
        <div class="head">
          <div class="title">用户信息填写</div>
        </div>
        <div class="demo-drawer__content">
          <el-row class="mt20">
            <el-col :span="18">
              <el-form
                ref="userField"
                size="small"
                :rules="ruleValidate"
                :model="userInfo"
                label-width="130px"
                @submit.native.prevent
                >
                <el-form-item label="手机号(账号)：" prop="account">
                  <el-input
                    type="text"
                    size="small"
                    placeholder="请输入手机号(账号)"
                    v-model="userInfo.account"
                  />
                </el-form-item>
                <el-form-item label="登录密码：" prop="pwd">
                  <el-input
                    type="password"
                    size="small"
                    minlength="6"
                    placeholder="请输入密码"
                    v-model="userInfo.pwd"
                  />
                </el-form-item>
                <el-form-item label="确认密码：" prop="repwd">
                  <el-input
                    type="password"
                    size="small"
                    minlength="6"
                    placeholder="请再次输入密码"
                    v-model="userInfo.repwd"
                  />
                </el-form-item>
                <el-form-item label="支付密码：" prop="pay_password">
                  <el-input
                    :type="isShowPwd?'number':'password'"
                    size="small"
                    maxlength="6"
                    placeholder="请输入六位数字支付密码"
                    v-model="userInfo.pay_password"
                    @input="forceNumberInput"
                  >
                  <el-button @click="isShowPwd = !isShowPwd" slot="append" icon="el-icon-view"></el-button>
                  </el-input>
                </el-form-item>
                <el-form-item label="用户昵称：" prop="nickname">
                  <el-input
                    type="text"
                    size="small"
                    placeholder="请输入用户昵称"
                    v-model="userInfo.nickname"
                  />
                </el-form-item>
                <el-form-item label="头像：">
                  <div
                    class="upLoadPicBox"
                  >
                    <div v-if="userInfo.avatar" class="pictrue">
                      <img :src="userInfo.avatar">
                      <i
                      class="el-icon-error btndel"
                      @click="userInfo.avatar=''"
                  />
                    </div>
                    <div v-else class="upLoad" @click="modalPicTap('1')">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="真实姓名：">
                  <el-input
                    type="text"
                    size="small"
                    placeholder="请输入真实姓名"
                    v-model="userInfo.real_name"
                  />
                </el-form-item>
                <el-form-item label="手机号：">
                  <el-input
                    type="text"
                    placeholder="请输入手机号"
                    size="small"
                    v-model="userInfo.phone"
                  />
                </el-form-item>
                <el-form-item label="身份证：" prop="card_id">
                  <el-input
                    type="text"
                    placeholder="请输入身份证号码"
                    size="small"
                    v-model="userInfo.card_id"
                  />
                </el-form-item>
                <!-- <el-form-item label="生日：" prop="birthday">
                  <el-date-picker
                    size="small"
                    v-model="userInfo.birthday"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item> -->
                <el-form-item label="性别：">
                  <el-radio-group v-model="userInfo.sex">
                    <el-radio :label="0">保密</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="状态：" required>
                  <el-radio-group v-model="userInfo.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">正常</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="推广员：" required>
                  <el-radio-group v-model="userInfo.is_promoter">
                    <el-radio :label="0">关闭</el-radio>
                    <el-radio :label="1">开启</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="公司:">
                    <el-radio-group v-model="userInfo.is_company">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="省代:">
                    <el-radio-group v-model="userInfo.is_pagent">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="市代:">
                    <el-radio-group v-model="userInfo.is_agent">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="水站负责人:">
                    <el-radio-group v-model="userInfo.station_head">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="水站推荐人:">
                    <el-radio-group v-model="userInfo.station_spread">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="水站:">
                  <el-radio-group
                    v-model="userInfo.is_station"
                  >
                    <el-radio :label="1" class="radio">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="省代ID:" v-if="userInfo.is_agent || userInfo.station_spread || userInfo.station_head || userInfo.is_station">
                  <el-select v-model="userInfo.pagent_id" clearable filterable placeholder="请选择">
                    <el-option
                      v-for="item in userPagentList"
                      :key="item.uid"
                      :label="item.nickname"
                      :value="item.uid">
                    </el-option>
                  </el-select>
                </el-form-item>
                
                  <el-form-item v-if="userInfo.station_spread || userInfo.station_head || userInfo.is_station" label="市代ID:">
                      <el-select clearable v-model="userInfo.agent_id" filterable placeholder="请选择">
                        <el-option
                          v-for="item in userList"
                          :key="item.uid"
                          :label="item.nickname"
                          :value="item.uid">
                        </el-option>
                      </el-select>
                  </el-form-item>
                
                
                  <el-form-item v-if="userInfo.is_station || userInfo.station_spread" label="负责人ID:">
                      <el-select clearable v-model="userInfo.station_head_id" filterable placeholder="请选择">
                        <el-option
                          v-for="item in userHeaderList"
                          :key="item.uid"
                          :label="item.nickname"
                          :value="item.uid">
                        </el-option>
                      </el-select>
                  </el-form-item>
                
                
                  <el-form-item v-if="userInfo.is_station" label="推荐人ID:">
                      <el-select clearable v-model="userInfo.station_spread_id" filterable placeholder="请选择">
                        <el-option
                          v-for="item in userSpreadList"
                          :key="item.uid"
                          :label="item.nickname"
                          :value="item.uid">
                        </el-option>
                      </el-select>
                  </el-form-item>
                
                
              </el-form>   
            </el-col>
            <el-col :span="23">
              <div class="demo-drawer__footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm('userField')" :loading="loading" size="small">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
       </div>  
    </el-drawer>
  </div>
</template>
<script>

import { addUserApi,userLstApi } from '@/api/user'
export default {
  name: 'UserCreate',
  props: {
    createDrawer: {
      type: Boolean,
      default: false,
    }, 
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号'))
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('格式不正确!'))
      } else {
        callback()
      }
    }
    const validateCard = (rule, value, callback) => {
      if (value && !/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/.test(value)) {
        callback(new Error('格式不正确!'))
      } else {
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userInfo.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      userInfo: {
        avatar: "",
        sex: 0,
        status: 1,
        is_promoter: 1,
        is_company:0,
        is_agent:0,
        is_pagent:0,
        station_spread:0,
        station_head:0,
        is_station:0,
        pagent_id:'',
      },
      ruleValidate: {
        account: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        card_id: [{validator: validateCard, trigger: 'blur'}],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        repwd: [{ required: true, validator: validatePass2, trigger: 'blur' }],
        pay_password: [{ required: true, message: '请输入六位数字支付密码', trigger: 'blur' }],
      },
      userList:[],
      userPagentList:[],
      isShowPwd:false,
    }
  },
  mounted() {
    this.getUserList();
    this.getPagentUserList();
    this.getHeadUserList();
    this.getSpreadUserList();
  },
  methods: {
    handleClose() {
      this.resetData()
      this.$emit('closeDrawer');
    },
    resetData(){
      this.$refs.userField.resetFields()
      this.userInfo.avatar=""
      this.userInfo.phone=""
      this.userInfo.real_name=""
      this.userInfo.card_id=""
      this.userInfo.birthday=""
      this.userInfo.sex = 0
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      this.$modalUpload(function(img) {
        _this.userInfo.avatar = img[0];
      }, tit);
    },
    submitForm(name){
      if(this.userInfo.is_agent && !this.userInfo.pagent_id){
        this.$message.error('选择市级代理必须选择省级ID');
        return
      }
      if(this.userInfo.station_spread && (!this.userInfo.pagent_id || !this.userInfo.agent_id || !this.userInfo.station_head_id)){
        this.$message.error('成为水站推荐人必须选择相应人员ID')
        return
      }
      if(this.userInfo.station_head && (!this.userInfo.pagent_id || !this.userInfo.agent_id)){
        this.$message.error('成为水站负责人必须选择相应人员ID')
        return
      }
      if(this.userInfo.is_station && (!this.userInfo.pagent_id || !this.userInfo.agent_id || !this.userInfo.station_head_id || !this.userInfo.station_spread_id)){
        this.$message.error('成为水站必须选择省代、市代、负责人和推荐人相应ID')
        return
      }
      this.loading = true;
      this.$refs[name].validate(valid => {
        if (valid) {
          addUserApi(this.userInfo).then(async res => {
            this.loading = false;
            this.$message.success(res.message);
            this.$emit('closeDrawer');
            this.$emit('getList');
          })
          .catch(res => {
            this.loading = false;
            this.$message.error(res.message);
          })
        }else{
          this.loading = false;
        }
      });
    },
    //获取市代用户列表
    getUserList(){
      userLstApi({is_agent:1,limit:10000,page:1}).then(res => {
          this.userList = res.data.list;
      }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
      })
    },
    //获取省代用户列表
    getPagentUserList(){
      userLstApi({is_pagent:1,limit:10000,page:1}).then(res => {
          this.userPagentList = res.data.list;
      }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
      })
    },
    //获取负责人用户列表
    getHeadUserList(){
      userLstApi({station_head:1,limit:10000,page:1}).then(res => {
          this.userHeaderList = res.data.list;
      }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
      })
    },
    //获取推荐人用户列表
    getSpreadUserList(){
      userLstApi({station_spread:1,limit:10000,page:1}).then(res => {
          this.userSpreadList = res.data.list;
      }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
      })
    },
    forceNumberInput(event){
      this.userInfo.pay_password = event.replace(/\D/g, '');
      if(event.length>6){
        this.userInfo.pay_password = event.substring(0, 6)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .head {
    padding: 15px 20px;
    border-bottom: 1px solid #DCDFE6;
    .title {
      font-weight: bold;
      font-size: 14px;
      line-height: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .demo-drawer__footer{
    text-align: right;
    padding: 20px 0;
  }
</style>
